import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";
import { Icon } from "@rneui/themed";
import { useTheme } from "@/contexts/ThemeContext";
import styles from "./LoginMethodToggle.style";

// 登录方式枚举
export enum LoginMethod {
  EMAIL_CODE = 0,
  EMAIL_PASSWORD = 1,
}

interface LoginMethodToggleProps {
  currentMethod: LoginMethod;
  onToggle: () => void;
}

/**
 * 登录方式切换按钮组件
 */
const LoginMethodToggle: React.FC<LoginMethodToggleProps> = ({
  currentMethod,
  onToggle,
}) => {
  const { colors } = useTheme();

  return (
    <TouchableOpacity
      onPress={onToggle}
      style={[styles.container, { borderColor: colors.border.light }]}
      accessibilityLabel={
        currentMethod === LoginMethod.EMAIL_CODE
          ? "切换到密码登录"
          : "切换到邮箱验证码登录"
      }
    >
      <Icon
        name={currentMethod === LoginMethod.EMAIL_CODE ? "key" : "email"}
        type="material"
        color={colors.text.primary}
        size={20}
        style={styles.icon}
      />
      <Text style={[styles.text, { color: colors.text.primary }]}>
        {currentMethod === LoginMethod.EMAIL_CODE ? "密码登录" : "邮箱登录"}
      </Text>
    </TouchableOpacity>
  );
};

export default LoginMethodToggle;
